<template>
  <div class="discount">
    <div class="title">
      工具配件
      <span class="small">限时闪购</span>
    </div>
    <div class="lists">
      <div class="item" v-for="item of discount" :key="item.id">
        <div class="img-box">
          <div @click="goDetail(item._id)" class="cover"></div>
          <img class="img" :src="item.img" alt="">
          <div class="sale"> <i class="iconfont icon-box"></i> 限时</div>
        </div>
        <div class="info">
          <p class="name">{{item.name}}</p>
          <p class="detail">{{item.detail}}</p>
          <p class="price">闪购价：{{item.price}}元</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import KeyboardHttp from '../../../models/KeyboardHttp.js'
export default {
  data() {
    return {
      discount:[]
    }
  },
  async mounted(){
    try {
      var res = await KeyboardHttp.getDiscount()
      this.discount = res.data.res
    }catch(err){
      console.log(err);
    }
  }
  
}
</script>

<style scoped>
  .discount{
    color: #fde9bf;
    padding: 28px 0 38px 0;
  }
  .title{
    font-size: 28px;
    font-weight: 500;
  }
  .small{
    margin-left: 10px;
    font-size: 14px;
    color: #000;
    padding: 0 7px;
    background-color: #fde9bf;
  }
  .lists{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .item{
    background-color: #000;
  }
  .img-box{
    width: 200px;
    height: 126px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
  }
  .cover{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(35, 44, 53, 0.5);
    transition: background-color .2s;
    z-index: 3;
  }
  .img{
    width: 100%;
    height: 100%;
    transition: transform .2s;
  }
  .img-box:hover .cover{
    background-color: transparent;
  }
  .img-box:hover .img{
    transform:scale(120%);
  }
  .sale{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 14px;
    color: #333;
    padding: 3px 7px;
    background-color: #fde9bf;
    z-index: 4;
  }
  .info{
    width: 200px;
    padding: 4px 8px 0;
  }
  .name{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
  }
  .detail{
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 6px 0;
  }
  .price{
    font-weight: 800;
    margin-bottom: 10px;
  }
</style>